<template>
  <basic-container>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="申请信息" name="first">
          <component :is="flowForm" ref="flowForm" :type="type" :processInsId="param.processInsId"></component>
          <el-card shadow="never" style="margin-top: 20px" v-if="process.status == 'todo'">
            <wf-examine-form
              ref="examineForm"
              :comment.sync="comment"
              :process="process"
              @user-select="handleUserSelect"
            ></wf-examine-form>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流转信息" name="second">
          <el-card shadow="never" style="margin-top: 5px">
            <wf-flow :flow="flow"></wf-flow>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程跟踪" name="third">
          <template v-if="activeName == 'third'">
            <el-card shadow="never" style="margin-top: 5px">
              <wf-design ref="bpmn" style="height: 500px" :options="bpmnOption"></wf-design>
            </el-card>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </basic-container>
</template>

<script>
import WfFlow from '../components/flow.vue'
import WfExamineForm from '../components/examForm.vue'

import FlowForm from '../mixins/flow-form'

export default {
  mixins: [FlowForm],
  name: 'FlowOps',
  props: ['type', 'param'],
  components: { WfFlow, WfExamineForm },
  data() {
    return {
      activeName: 'first',
      vars: [],
      flowForm: null
    }
  },
  mounted() {
    const { taskId, processInsId, formUrl } = this.param
    if (formUrl) {
      this.flowForm = require('@/views' + formUrl).default
    }
    if (taskId && processInsId) {
      this.getTaskDetail(taskId, processInsId)
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped></style>
